<template>
	<view class="report-container">
		<fui-nav-bar title="采购报表" isFixed isOccupy  @leftClick="pageBack"></fui-nav-bar>
		<view class="u-flex u-row-between u-p-35 bg-white">
			<view class="u-flex chart-select" @tap="chartTypeShow = true;">
				<text class="u-font-28 u-m-r-30">{{chartTypeText}}</text>
				<fui-icon name="arrowdown" size="28"></fui-icon>
			</view>
			<view class="">
				<view class="u-font-24 u-text-right">当前统计时间段</view>
				<view class="u-font-24 u-text-right">{{startTime}}至{{endTime}}</view>
			</view>
		</view>
		<!-- echart 图表区域 -->
		<view class="bg-white chart-container">
			<qiun-data-charts
				:type="chartTypeValue == 1?'line':'column'"
				:chartData="reportData"
				:opts="chartTypeValue == 1?lopts:copts"
				background="rgba(0,0,0,0)"
				:ontouch="true"
			/>
		</view>
		<!-- 图表配置项 -->
		<view class="report-config bg-white  u-m-t-20">
			<view class="u-font-32 u-m-b-30" style="font-weight: bold;">图表设置</view>
			<view class="filter-item u-flex u-row-between">
				<text class="u-font-30 u-m-r-30">截止日期</text>
				<view class="u-flex-1 u-flex u-row-between" style="overflow: hidden;" @tap="filterDateShow = true;">
					<view class="u-flex-1 u-line-1">
						<text class="u-font-30" style="color: #999;" v-if="!filterDate">请选择</text>
						<view class="u-font-30 u-line-1" v-else>
							{{filterDate}}
						</view>
					</view>
					<fui-icon name="arrowright"></fui-icon>
				</view>
			</view>
			<view class="filter-item u-flex u-row-between">
				<text class="u-font-30 u-m-r-30">统计周期</text>
				<view class="u-flex-1 u-flex u-row-between" style="overflow: hidden;" @tap="filterWeekShow = true;">
					<view class="u-flex-1 u-line-1">
						<text class="u-font-30" style="color: #999;" v-if="!filterWeekText">请选择</text>
						<view class="u-font-30 u-line-1" v-else>
							{{filterWeekText}}
						</view>
					</view>
					<fui-icon name="arrowright"></fui-icon>
					
				</view>
			</view>
			<view class="filter-item u-flex u-row-between">
				<text class="u-font-30 u-m-r-30">周期数量</text>
				<view class="u-flex-1 u-flex u-row-between" style="overflow: hidden;" @tap="filterCountShow = true;">
					<view class="u-flex-1 u-line-1">
						<text class="u-font-30" style="color: #999;" v-if="filterCountValue ===''">请选择</text>
						<view class="u-font-30 u-line-1" v-else>
							{{filterCountValue}}
						</view>
					</view>
					<fui-icon name="arrowright"></fui-icon>
				</view>
			</view>
			<view class="filter-item u-flex u-row-between">
				<text class="u-font-30 u-m-r-30">统计指标</text>
				<view class="u-flex-1 u-flex u-row-between" style="overflow: hidden;" @tap="filterOptionShow = true;">
					<view class="u-flex-1 u-line-1">
						<text class="u-font-30" style="color: #999;" v-if="!filterOptionText">请选择</text>
						<view class="u-font-30 u-line-1" v-else>
							{{filterOptionText}}
						</view>
					</view>
					<fui-icon name="arrowright"></fui-icon>
				</view>
			</view>
			<view class="" v-if="filterGroupList.length!==0">
				<view class="filter-item u-flex u-row-between">
					<text class="u-font-30 u-m-r-30">统计分组</text>
					<view class="u-flex-1 u-flex u-row-between" style="overflow: hidden;" @tap="filterGroupShow = true;">
						<view class="u-flex-1 u-line-1">
							<text class="u-font-30" style="color: #999;" v-if="!filterGroupText">请选择</text>
							<view class="u-font-30 u-line-1" v-else>
								{{filterGroupText}}
							</view>
						</view>
						<fui-icon name="arrowright"></fui-icon>
					</view>
				</view>
				<view class="filter-item u-flex u-row-between">
					<text class="u-font-30 u-m-r-30">已选标签</text>
					<view class="u-flex-1 u-flex u-row-between" style="overflow: hidden;" @tap="filterTagShow = true;">
						<view class="u-flex-1 ">
							<text class="u-font-30" style="color: #999;" v-if="filterTagList.length===0">请选择</text>
							<view class="u-font-30 " v-else>
								<fui-tag :text="item.name" theme="light" shape="circle" closeable v-for="(item,index) in filterTagList" 
								:key="item.id" @close="tagClose(index)"></fui-tag>
							</view>
						</view>
						<fui-icon name="arrowright"></fui-icon>
					</view>
				</view>
			</view>
			
			<view class="group-container bg-white u-flex">
				<u-button shape="corcle" class="u-flex-1 u-m-r-30" :hair-line="false" @tap="resetCharts()" style="border-radius: 45rpx;">重置图表</u-button>
				<u-button shape="corcle" class="u-flex-1" @tap="initCharts()" :hair-line="false"  style="border-radius: 45rpx;background-color: #ffbb1a;border: none;">生成图表</u-button>
			</view>
		</view>	
		
		<!-- 选择框 -->
		<fui-picker :options="chartsTypeList" linkage :show="chartTypeShow" @change="chartsTypeChange" @cancel="chartTypeShow = false;"></fui-picker>
		<fui-date-picker :show="filterDateShow" :value="filterDate" type="3" @change="filterDateChange" @cancel="filterDateShow = false;"></fui-date-picker>

		<!-- <u-picker mode="time" v-model="filterDateShow" :default-time="filterDate"  :params="filterConfig" @confirm="filterDateChange"></u-picker> -->
		<fui-picker linkage :show="filterWeekShow" @cancel="filterWeekShow = false;" :value="[filterWeekValue-1]"  :options="filterWeekList" @change="filterWeekChange"></fui-picker>
		<fui-picker linkage :show="filterCountShow" @cancel="filterCountShow = false;" :value="[filterCountValue-4]" :options="filterCountList" @change="filterCountChange"></fui-picker>
		<fui-picker linkage :show="filterOptionShow" @cancel="filterOptionShow = false;" :value="[filterOptionValue]"  :options="filterOptionList" @change="filterOptionChange"></fui-picker>
		<fui-picker linkage :show="filterGroupShow" @cancel="filterGroupShow = false;" :value="[filterGroupValue]" :options="filterGroupList" @change="filterGroupChange"></fui-picker>
		<fui-bottom-popup :show="filterTagShow" mode="bottom" safe-area-inset-bottom	>
			<view style="min-height: 1200rpx;"> 
				<view class="u-text-center choose-tag-title u-font-32" >
					选择统计项
					<text class="clear-btn" @click="clearChoose()">清除选择</text>
				</view>
				<tag-list v-if="filterTagShow" ref="taglist" :initData="filterTagList" :type="filterGroupValue" @choose="chooseTagFn"></tag-list>
			</view>
		</fui-bottom-popup>
	</view>
</template>

<script>
	import TagList from './components/TagList.vue'
	export default{
		components:{TagList},
		data(){
			return {
				lopts: {
					color: [this.themeColor],
					dataLabel: false,
					fontColor: '#999999',
					fontSize: 11,
					dataPointShape: false,
					legend: {
						float: 'center',
					},
					xAxis: {
						disableGrid: false,
						gridColor: '#EEEEEE',
						rotateLabel:true,
						rotateAngle:45,
						itemCount:3,
					},
					yAxis: {
						gridColor: '#EEEEEE'
					},
					extra: {
						line: {
							width: 3,
						},
					}
				},
				copts: {
					
					color: ['#666666', '#FFBB1A', '#FF551A'],
					dataLabel: false,
					fontColor: '#999999',
					fontSize: 11,
					xAxis:{
						rotateLabel:true,
						rotateAngle:45,
						itemCount:3,
					},
					yAxis: {
						disableGrid: false,
						gridColor: '#eeeeee',
						
					},
					legend: {
						float: 'center'
					},
					extra: {
						column: {
							width: 5,
							barBorderCircle: true,
							seriesGap: 6,
							categoryGap: 8,
							linearType: "custom",
							customColor: ['#666666', '#FFBB1A', '#FF551A']
						},
					}
				},
				startTime:'',
				endTime:'',
				chartTypeShow:false,// 统计图类型选择
				chartTypeText:'柱形图',
				chartTypeValue:0,
				filterDateShow:false,//截止日期选择
				filterDate:'',
				filterWeekShow:false,//统计周期选择
				filterWeekValue:2,
				filterWeekText:'周',
				filterCountShow:false,//统计数量选择
				filterCountValue:6,
				filterOptionShow:false,//统计指标选择
				filterOptionValue:0,
				filterOptionText:'金额',
				filterGroupShow:false,//统计分组选择
				filterGroupValue:'',
				filterGroupText:'',
				filterGroupList:[],
				filterTagShow:false,//统计标签选择
				filterTagList:[],
				filterConfig:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
				},
				chartsTypeList:[
					{value:0,text:'柱形图'},
					{value:1,text:'折线图'},
				],
				filterWeekList:[
					{value:1,text:'日'},
					{value:2,text:'周'},
					{value:3,text:'月'},
					{value:4,text:'季'},
					{value:5,text:'年'},
				],
				filterCountList:[
					{value:4,text:4},
					{value:5,text:5},
					{value:6,text:6},
					{value:7,text:7},
					{value:8,text:8},
					{value:9,text:9},
					{value:10,text:10},	
					{value:11,text:11},
					{value:12,text:12},
				],
				filterOptionList:[
					{value:0,text:'金额'},
					{value:1,text:'数量'},
				],
				reportData:{},
			}
		},
		async created() {
			this.filterDate = this.$fui.dateFormatter(new Date(),'y-m-d',4);
			await this.getFilterGroupList();
			await this.initCharts();
		},
		methods:{
			resetCharts(){
				this.filterDate= this.$fui.dateFormatter(new Date(),'y-m-d',4);
				this.filterWeekValue = 2;
				this.filterWeekText = '周';
				this.filterCountValue = 6;
				this.filterOptionValue = 0;
				this.filterOptionText = '金额';
				this.filterGroupValue = 0;
				this.filterGroupText = '总计';
				this.filterTagList = [{
					id:'00000000-0000-0000-0000-000000000001',
					name:'采购'
				},{
					id:'00000000-0000-0000-0000-000000000002',
					name:'付款'
				}];
				this.initCharts();
			},
			async initCharts(){
				if(this.filterDate === ''){
					uni.$fui.toast('截止日期不得空');
					return false;
				}
				if(this.filterOptionText === ''){
					uni.$fui.toast('统计指标不得空');
					return false;
				}
				if(this.filterCountText === ''){
					uni.$fui.toast('周期数量不得空');
					return false;
				}
				if(this.filterWeekText === ''){
					uni.$fui.toast('统计周期不得空');
					return false;
				}
				if(this.filterGroupText === ''){
					uni.$fui.toast('统计分组不得空');
					return false;
				}
				if(this.filterTagList.length < 2){
					uni.$fui.toast('统计标签不得少于两个');
					return false;
				}
				const params = {
					endTime:this.filterDate,
					dimensionality:this.filterWeekValue,
					cycles:this.filterCountValue,
					statisticalIndicator:this.filterOptionValue,
					statisticalOption:this.filterGroupValue,
					options:this.filterTagList,
				}
				const res = await  this.$newHttp.post('api/v1.2/Chart/BuyerGetReport',params);
				if(res.code === 200){
					this.reportData = res.data; 
					this.startTime = this.$fui.dateFormatter(res.data.beginTime,'y-m-d');
					this.endTime = this.$fui.dateFormatter(res.data.endTime,'y-m-d');
				}else{
					uni.$fui.toast('获取报表数据失败，请重试')
				}
			},
			clearChoose(){
				this.$refs['taglist'].clearChooseFn();
				this.filterTagList = [];
			},
			chooseTagFn(data){
				this.filterTagList = data;
				this.filterTagShow = false;
			},
			tagClose(index){
				this.filterTagList.splice(index,1)
			},
			// 获取统计分组
			async getFilterGroupList(){
				const res = await this.$newHttp.get('api/v1.2/Chart/GetStatisticalOptions',{params:{isBuyer:true}});
				if(Array.isArray(res) && res.length > 0){
					this.filterGroupList = res.map(item=>{
						return {
							text:item.description,
							value:item.value
						}
					});
					this.filterGroupValue = this.filterGroupList[0].value;
					this.filterGroupText = this.filterGroupList[0].text;
					this.filterTagList = [{
						id:'00000000-0000-0000-0000-000000000001',
						name:'采购'
					},{
						id:'00000000-0000-0000-0000-000000000002',
						name:'付款'
					}]
				}
			},
			// 统计图类型选择
			chartsTypeChange(e){
				console.log(e);
				this.chartTypeText = e.text;
				this.chartTypeValue = e.value;
			},
			// 截止日期选择
			filterDateChange(e){
				console.log(e);
				this.filterDate = e.year+'-'+e.month+'-'+e.day;
				this.filterDateShow = false;
			},
			// 统计周期选择
			filterWeekChange(e){
				this.filterWeekText= e.text;
				this.filterWeekValue = e.value;
				this.filterWeekShow = false;
			},
			// 周期数量选择
			filterCountChange(e){
				this.filterCountValue = e.value;
				this.filterCountShow = false;
			},
			// 统计指标选择
			filterOptionChange(e){
				this.filterOptionText = e.text;
				this.filterOptionValue = e.value;
				this.filterOptionShow = false;
			},
			// 统计分组选择
			filterGroupChange(e) {
				this.filterGroupText = e.text;
				this.filterGroupValue = e.value;
				this.filterGroupShow = false;
				this.filterTagList = [];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.report-container{
		padding-bottom: 150rpx;
		.bg-white{
			background: #fff;
		}
		.chart-select{
			border: 1rpx solid #333;
			border-radius: 35rpx;
			padding: 16rpx 24rpx 16rpx 32rpx;
		}
		.report-config{
			padding: 35rpx 35rpx 0rpx 35rpx;
			.filter-item{
				padding: 40rpx 0;
				border-bottom: 1rpx solid #e5e5e5;
			}
		}
		.group-container{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding:35rpx;
		}
		.choose-tag-title{
			position: relative;
			line-height: 100rpx;height: 100rpx;font-weight: bold;
			.clear-btn{
				position: absolute;
				right: 35rpx;
				top: 0;
				font-size: 28rpx;
				color: #ff551a;
			}
		}
	}
</style>